<template>
    <div class="goodsManageBox">
        <router-link :to="{path:'add-goods'}">
            <el-button type="primary">添加商品</el-button>
        </router-link>

        <el-tabs v-model="activeName" @tab-click="handleClick">

            <el-tab-pane label="商品列表" name="2">
                <el-table
                    v-loading="loading"
                    :data="list"
                    border
                >

                    <el-table-column label="商品名称" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>

                    <el-table-column label="商品简介" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.slogan}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="商品分类" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.class_name }}
                        </template>
                    </el-table-column>

                    <el-table-column label="商品缩略图" align="center">
                        <template slot-scope="scope">
                            <el-image
                                    fit="contain"
                                    class="thumbnailBox"
                                    :src="scope.row.thumbnail">
                            </el-image>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="出售价格">
                        <template slot-scope="scope">
                            <span>{{ scope.row.selling_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="进价">
                        <template slot-scope="scope">
                            <span>{{ scope.row.purchase_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="原价">
                        <template slot-scope="scope">
                            <span>{{ scope.row.original_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="库存">
                        <template slot-scope="scope">
                            <span>{{ scope.row.stock }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="所属商户名称">
                        <template slot-scope="scope">
                            <span>{{ scope.row.stores_name }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    icon="el-icon-sold-out"
                                    type="primary"
                                    @click="changeStatus(scope.row,1)">下架
                            </el-button>

                            <router-link :to="{path:'modify-goods',query:{'id':scope.row.id}}">
                                <el-button
                                        size="mini"
                                        icon="el-icon-edit"
                                        type="primary"
                                        class="fixSecond">修改</el-button>
                            </router-link>

                            <el-button
                                    size="mini"
                                    @click="deleteFn(scope.row.id)"
                                    icon="el-icon-delete"
                                    type="danger">删除
                            </el-button>

                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>

            <el-tab-pane label="审核商品" name="0" v-if="reviewVisible">
                <el-table
                        v-loading="loading"
                        :data="list"
                        border
                >

                    <el-table-column label="商品名称" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>

                    <el-table-column label="商品简介" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.slogan}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="商品分类" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.class_name }}
                        </template>
                    </el-table-column>

                    <el-table-column label="商品缩略图" align="center">
                        <template slot-scope="scope">
                            <img class="thumbnailBox" :src="scope.row.thumbnail" alt="">
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="出售价格">
                        <template slot-scope="scope">
                            <span>{{ scope.row.selling_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="进价">
                        <template slot-scope="scope">
                            <span>{{ scope.row.purchase_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="原价">
                        <template slot-scope="scope">
                            <span>{{ scope.row.original_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="库存">
                        <template slot-scope="scope">
                            <span>{{ scope.row.stock }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="所属商品名称">
                        <template slot-scope="scope">
                            <span>{{ scope.row.stores_name }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                                <el-button
                                        icon="el-icon-check"
                                        size="mini"
                                        @click="changeStatus(scope.row,2)"
                                        type="primary"
                                        class="fixFirst">通过
                                </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>

            <el-tab-pane label="下架商品" name="1">
                <el-table
                        v-loading="loading"
                        :data="list"
                        border
                >

                    <el-table-column label="商品名称" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>

                    <el-table-column label="商品简介" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.slogan}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="商品分类" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.class_name }}
                        </template>
                    </el-table-column>

                    <el-table-column label="商品缩略图" align="center">
                        <template slot-scope="scope">
                            <img class="thumbnailBox" :src="scope.row.thumbnail" alt="">
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="出售价格">
                        <template slot-scope="scope">
                            <span>{{ scope.row.selling_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="进价">
                        <template slot-scope="scope">
                            <span>{{ scope.row.purchase_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="原价">
                        <template slot-scope="scope">
                            <span>{{ scope.row.original_price }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="库存">
                        <template slot-scope="scope">
                            <span>{{ scope.row.stock }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="所属商品名称">
                        <template slot-scope="scope">
                            <span>{{ scope.row.stores_name }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    icon="el-icon-sell"
                                    type="primary"
                                    @click="changeStatus(scope.row,2)">上架
                            </el-button>
                            <router-link :to="{path:'modify-goods',query:{'id':scope.row.id}}">
                                <el-button size="mini"
                                           icon="el-icon-edit"
                                           type="primary"
                                           class="fixSecond">修改</el-button>
                            </router-link>
                            <el-button size="mini"
                                       @click="deleteFn(scope.row.id)"
                                       icon="el-icon-delete"
                                       type="danger">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </el-tab-pane>


        </el-tabs>

        <!-- 分页 -->
        <el-pagination
                class="pageBox"
                background
                layout="prev, pager, next"
                :total="pageTotal"
                :page-size="10"
                v-if="pageShow"
                @current-change="handleCurrentChange">
        </el-pagination>

    </div>

</template>

<script>
    const _ = require('lodash');
    export default {
        name: 'goods_manage',
        components: {},
        data() {
            return {
                loading: false,
                activeName: '2',
                list: null,
                pageTotal: 0,
                pageShow: false,
                initial_data: {//获取初始数据
                    token: localStorage.getItem('user_token'),//token
                    id: '',//商品id
                    name: '',//商品名称
                    slogan: '',//商品简介
                    class_name: '',//商品分类
                    thumbnail: '',//商品缩略图
                    selling_price: '',//出售价格
                    purchase_price: '',//进价
                    original_price: '',//原价
                    stock: '',//库存
                    stores_name: ''//所属商品名称
                },
                reviewVisible: false
            }
        },
        watch: {},
        methods: {
            deleteFn(id) {

                this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                    this.$http.get('/web/good/del', {
                        params: {
                            'token': localStorage.getItem('user_token'),
                            'id': id
                        }
                    }).then((response) => {
                        if (response.data.status == 'success') {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.defaultFn();
                        }
                    }).catch((error) => {
                        console.log('error:', error)
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            // 触发分页
            handleCurrentChange(val) {
                this.defaultFn(this.activeName, val)
            },
            handleClick(tab, event) {
                this.defaultFn(this.activeName, 1)
            },
            //商品状态修改
            changeStatus(row, status) {
                this.$http.get('/web/good/status', {
                    params: {
                        'token': localStorage.getItem('user_token'),
                        'id': row.id,
                        'status': status
                    }
                }).then((response) => {
                    if (response.data.status == 'success') {
                        this.list = response.data.data.list;
                        this.loading = false;
                        this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        this.defaultFn(this.activeName)
                    }
                }).catch((error) => {
                    console.log('error:', error);
                    this.loading = false;
                })
            },
            //初始化数据
            defaultFn(activeName, currentPage) {
                if (this.$store.getters.roles[0] === 'admin'){
                    this.reviewVisible = true;
                }

                this.list = null;
                this.loading = true;
                this.$http.get('/web/good/list', {
                    params: {
                        'token': localStorage.getItem('user_token'),
                        'status': activeName,
                        'page': currentPage,
                        'pageSize': 10,
                        'store_id': localStorage.getItem('user_store_id')
                    }
                }).then((response) => {
                    if (response.data.status === 'success') {
                        this.list = response.data.data.list;
                        this.pageTotal = response.data.data.pagination.total;
                        if (this.pageTotal > 20) {
                            this.pageShow = true;
                        } else {
                            this.pageShow = false;
                        }
                        this.loading = false;
                    }
                }).catch((error) => {
                    console.log('error:', error);
                    this.loading = false;
                })

            }
        },
        mounted() {
            this.defaultFn(this.activeName, 1);
        }
    }
</script>

<style scoped lang="scss">
    .goodsManageBox {
        min-width: 1024px;
        margin: 40px;

        .thumbnailBox {
            width: 80px;
        }

        .pageBox {
            text-align: center;
            margin-top: 30px;
        }

        .fixFirst {
            margin-bottom: 10px;
        }

        .fixSecond {
            margin: 10px 0;
        }
    }
</style>

